<template>
  <div>
    <!-- 上面的搜索框 -->
    <van-search v-model="key" placeholder="请输入搜索关键词" />

    <!-- 热门搜索容器 -->
    <div v-if="true" class="search_wrap">
      <p class="hot_title">热门搜索</p>
      <div class="hot_name_wrap">
        <span v-for="item in 6" :key="item" class="hot_item">可乐</span>
      </div>
    </div>

    <!-- 搜索结果容器 -->
    <div v-else class="search_wrap">
      <p class="hot_title">最佳匹配</p>
       <van-cell-group>
        <van-cell
          v-for="item in 6"
          :key="item"
          title="歌名"
          label="作者 - 歌名"
        >
          <template #right-icon>
            <div style="display: flex; align-items: center">
              <van-icon style="font-size: 24px" name="play-circle-o" />
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
export default {

  data() {
    return {
      key: '',
    };
  },
};
</script>

<style>
/* 搜索容器的样式 */
.search_wrap {
  padding: 10px;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 12px;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 10px 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 35px;
  margin-right: 20px;
  margin-bottom: 15px;
  padding: 0px 15px;
  font-size: 12px;
  line-height: 35px;
  color: #333;
  border-color: #d3d4da;
  border-radius: 20px;
  border: 1px solid #d3d4da;
}
</style>